import React, { Component } from "react";
import "./App.scss";
export class App extends Component {
  state = {
    phone: "", //
    msg_code: "", // 验证码
    checked: false, // 服务条框的选中状态
    error_msg: "", //错误消息提示
  };
  // 三个表单的赋值 双向数据绑定
  // handlePhoneChange = (e) => {
  // 从事件源获取值再赋值
  //   this.setState({
  //     phone: e.target.value,
  //   });
  // };
  // handleMsgChange = (e) => {
  // 从事件源获取值再赋值
  //   this.setState({
  //     msg_code: e.target.value,
  //   });
  // };
  // handleTrueChange = (e) => {
  // 从事件源获取值再赋值
  //   this.setState({
  //     checked: e.target.checked,
  //   });
  // };

  // 三个表单的集合
  handleAllChange = (e) => {
    // 从事件源中解构出赋值的data-type和data-key属性值
    let { type, key } = e.target.dataset;
    // 判断如果是单选框就赋值checked的值
    if (type == "checkbox") {
      this.setState({
        [key]: e.target.checked,
      });
    } else {
      // 判断如果不是单选框就赋值vlue的值
      this.setState({
        [key]: e.target.value,
      });
    }
  };
  // 登录按钮的函数
  handleLogin = () => {
    let phone = this.state.phone;
    let valid = this.validatePhone(phone);
    console.log(valid);
    if (!valid) {
      return false;
    }
  };
  // 正则验证
  validatePhone = (phone) => {
    if (!phone) {
      this.setState({
        error_msg: "手机号码不能为空",
      });
      return false;
    } else if (!/^1[0-9]{10}$/.test(phone)) {
      this.setState({
        error_msg: "手机号码格式有误,请重新输入",
      });
      return false;
    } else {
      this.setState({
        error_msg: "",
      });
      return true;
    }
  };
  render() {
    return (
      <div className="login">
        <input
          type="text"
          placeholder="请输入手机号"
          className="phone"
          onChange={this.handleAllChange}
          value={this.state.phone}
          data-type="text"
          data-key="phone"
        />
        <div className="login-item-phone">
          <input
            type="text"
            placeholder=" 请输入短信验证码"
            className="msg_code"
            value={this.state.msg_code}
            onChange={this.handleAllChange}
            data-type="number"
            data-key="msg_code"
          />
          <button className="getmsg">获取验证码</button>
        </div>
        <div>
          {this.state.error_msg ? (
            <span className="error">{this.state.error_msg}</span>
          ) : (
            ""
          )}
        </div>
        <div className="login-item-msg">
          <span className="yuwenti">遇到问题？</span>
          <span className="playpwd">使用密码验证登录</span>
        </div>
        <button className="loginbtn" onClick={this.handleLogin}>
          登录
        </button>
        <div className="login-item-tk">
          <input
            type="checkbox"
            className="checkboxbtn"
            value={this.state.checked}
            onChange={this.handleAllChange}
            data-type="checkbox"
            data-key="checked"
          />
          <span className="tiaokuan">
            我同意《
            <a href="#">服务条款</a>》和《
            <a href="#">网易隐私政策</a>》
          </span>
        </div>
      </div>
    );
  }
}

export default App;
